<template>
    <div class="course-table" >
      <el-table
        :data="tableData.slice((queryInfo.pagenum-1)*queryInfo.pagesize,queryInfo.pagenum*queryInfo.pagesize)"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="exChange"
        style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-select v-model="props.row.cg_id" placeholder="请选择班级小组">
                <el-option
                  v-for="item in classes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

              <el-select
                v-model="props.row.week"
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择周数">
                <el-option
                  v-for="item in opt_week"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

              <el-button type="primary" @click="querySchedule(props.row.cg_id, props.row.week)">查询课表</el-button>
              <!-- 课程表内容部分 -->
              <div class="c_content">
                <el-scrollbar style="height: 100%" >
                  <div class="course-table-content" >
                      <div class="top" :style="{width:courseWidth * weekTable.length + 35 + 'px'}">
                          <div v-for="item in weekTable" class="top-text" :style="{width: courseWidth + 'px'}">{{item}}</div>
                      </div>
                      <div class="main" :style="{ width:courseWidth * weekTable.length + 35 + 'px',
                                                  height:courseHeight * timeTable.length +'px'}">
                          <div class="period">
                              <div v-for="item in timeTable" class="left-text" :style="{height: courseHeight + 'px'}">{{item}}</div>
                          </div>
                          <!--课表-->
                          <div v-for="(item,index) in Courses">
                              <div class="flex-item kcb-item" @click="selectedCourseIndex = index;showUsualCourseDialog=true"
                                   :style="{  marginLeft:(item.courseColum-1) * courseWidth + 'px',
                                              marginTop:(item.c_time_row1-1) * courseHeight + 5+ 'px',
                                              width:courseWidth - 5 + 'px',
                                              height:item.c_time_length * courseHeight - 5 +'px',
                                              backgroundColor:colorArrays[index%9]}">
                                  <div class="small-text">{{item.course_name+'@'+item.now_place}}</div>
                              </div>
                          </div>
                      </div>
                  </div>
              </el-scrollbar>
              <!-- 课程信息弹窗 -->
              <el-dialog
                      title="课程信息"
                      :visible.sync="showUsualCourseDialog"
                      width="30%"
                      center>
                  <div class="dialog-content">
                      <div v-if="typeof(selectedCourse) != 'undefined'" >
                          <div>课程名称： {{selectedCourse.course_name}}</div>
                          <div>周数： 第{{selectedCourse.week}}周</div>
                          <div>上课时间： {{selectedCourse.class_day | formatDateTime}}</div>
                          <div>节数： {{selectedCourse.c_time}}</div>
                          <div v-if="selectedCourse.tea_name2 == null && selectedCourse.tea_name3 == null">上课教师： {{selectedCourse.tea_name1}}</div>
                          <div v-else-if="selectedCourse.tea_name2 != null && selectedCourse.tea_name3 == null && selectedCourse.tea_name4 == null">上课教师： {{selectedCourse.tea_name1 + ',' + selectedCourse.tea_name2 }}</div>
                          <div v-else-if="selectedCourse.tea_name4 == null">上课教师： {{selectedCourse.tea_name1 + ',' + selectedCourse.tea_name2 + ',' + selectedCourse.tea_name3}}</div>

                          <div v-else-if="selectedCourse.tea_name1 != null && selectedCourse.tea_name2 != null && selectedCourse.tea_name3 != null && selectedCourse.tea_name4 != null">上课教师： {{selectedCourse.tea_name1 + ',' + selectedCourse.tea_name2 + ',' + selectedCourse.tea_name3 + ',' + selectedCourse.tea_name4}}</div>
                          <div>上课地点： {{selectedCourse.now_place}}</div>
                      </div>
                      <div v-else class="tip" >本学期没有课哦</div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                      <el-button type="primary" @click="showUsualCourseDialog = false;editUsualCourseDialog = true;getEditData(selectedCourse)">修 改</el-button>
                      <el-button type="danger" @click="delCourse(selectedCourse.sch_detail_id,selectedCourse.week)">删 除</el-button>
                      <el-button @click="showUsualCourseDialog = false">取 消</el-button>
                  </span>
              </el-dialog>
              <el-dialog
                      title="修改课程"
                      :visible.sync="editUsualCourseDialog"
                      width="30%"
                      center>
                  <div class="dialog-content">
                      <div v-if="typeof(selectedCourse) != 'undefined'" >
                        <el-form :model="formClass" ref="formClass"  label-position="right" :rules="rulesClass"  label-width="120px">
                          <el-form-item label="选择期数:" prop="data_periods" class="sec_per" required>
                            <el-select v-model="formClass.data_periods" disabled placeholder="请选择期数" @change="getClassGroup(formClass.data_periods)">
                                <el-option
                                  v-for="(item,index) in periods"
                                  :key="index"
                                  :label="item.cg_periods"
                                  :value="item.school_id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择组数:" prop="cg_id" class="sec_per">
                            <el-select v-model="formClass.cg_id" collapse-tags placeholder="请选择组数">
                                <el-option
                                  v-for="item in classes"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择周数:" prop="data_weeks" class="sec_per" required>
                            <el-select v-model="formClass.data_weeks" placeholder="请选择周数">
                                <el-option
                                  v-for="item in weeks"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择课程日期:" prop="data_time" class="sec_per" required>
                            <el-date-picker
                              v-model="formClass.data_time"
                              value-format="yyyy-MM-dd"
                              type="date"
                              placeholder="选择课程日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="隐藏的课程ID:" prop="course_id" class="sec_per" width="120px" v-if='show_c'>
                            <el-input
                                placeholder="隐藏的课程ID"
                                v-model="formClass.course_id"> 
                            </el-input>
                        </el-form-item>
                        <el-form-item label="隐藏的课程编号:" prop="course_no" class="sec_per" width="120px" v-if='show_c'>
                            <el-input
                                placeholder="隐藏的课程编号"
                                v-model="formClass.course_no"> 
                            </el-input>
                        </el-form-item>
                        <el-form-item label="选择课程:" prop="course_name" class="sec_per" width="120px" required>
                            <el-input
                                placeholder="请选择课程名称"
                                @focus="open_course"
                                v-model="formClass.course_name"> 
                            </el-input>
                        </el-form-item>
                        <el-form-item label="选择上课时间:" prop="c_time_row1" class="sec_per" width="120px" required>
                            <el-select v-model="formClass.c_time_row1" placeholder="请选择上课时间">
                                <el-option
                                  v-for="item in sections"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="一共有几节课:" prop="c_time_length" class="sec_per" width="120px" required>
                            <el-select v-model="formClass.c_time_length" placeholder="请选择一共有几节课">
                                <el-option
                                  v-for="item in sec_len"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="上课教师:" prop="tea_name_all" class="sec_per" width="120px" required>
                            <el-input
                                placeholder="请选择上课教师"
                                @focus="open_teacher"
                                v-model="formClass.tea_name_all"> 
                            </el-input>
                        </el-form-item>
                        <el-form-item label="上课地点:" prop="cg_address" class="sec_per" width="120px" required>
                            <el-input v-model.trim="formClass.cg_address" placeholder="请输入上课地点"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="editCourseSubmit('formClass');editUsualCourseDialog=false">提交</el-button>
                            <el-button @click="editUsualCourseDialog=false">取消</el-button>
                        </el-form-item>
                    </el-form>
                  </div>
                  <div v-else class="tip" >本学期没有课哦</div>
                </div>
              </el-dialog>
              <!-- 选择课程弹框 -->
              <el-dialog title="选择课程" :visible.sync="dialogFormVisible">
                  <el-transfer
                      filterable
                      :render-content="renderContent"
                      filter-placeholder="请输入课程查询"
                      :titles="['所有课程', '已选择课程']"
                      v-model="selected_class"
                      :data="data_left_data">
                  </el-transfer>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirm_class(selected_class,data_left_data)">确 定</el-button>
                  </div>
              </el-dialog>
              <!-- 选择上课老师 -->
              <el-dialog title="选择上课教师" :visible.sync="dialogTeaVisible">
                  <el-transfer
                      filterable
                      :render-content="renderContent"
                      filter-placeholder="请输入教师查询"
                      :titles="['所有教师', '已选择教师']"
                      v-model="teacher_txt"
                      :data="data_left_tea">
                  </el-transfer>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogTeaVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirm_tea(teacher_txt,data_left_tea)">确 定</el-button>
                  </div>
              </el-dialog>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="期数"
          prop="cg_periods">
        </el-table-column>
        <el-table-column
          label="学期名"
          prop="cg_name">
        </el-table-column>
        <el-table-column
          label="开班时间"
          :formatter="dateFormat"
          prop="cg_start_time">
        </el-table-column>
        <el-table-column
          label="结束时间"
          :formatter="dateFormat"
          prop="cg_end_time">
        </el-table-column>
    </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="2">
      </el-pagination>

    </div>
</template>
 
<script>
  import addclass from '@/api/course';
  import { parseTime } from '@/api/date'
    export default {
        name: "classList",
        filters: {
          formatDateTime(time) {
            var date = new Date(time);
            return parseTime(date, 'yyyy-MM-dd');
          }
        },
        data(){
            return {
                queryInfo: {
                  query: '',
                  // 当前的页数
                  pagenum: 1,
                  // 当前每页显示多少条数据
                  pagesize: 5
                },
                total: 0,
                showUsualCourseDialog:false,
                showPracticeCourseDialog:false,
                editUsualCourseDialog: false,
                show_c: false,
                selectedCourseIndex:0,
                tableData: [],
                opt_week: [
                  {
                    value: '1',
                    label: '第一周'
                  }, {
                    value: '2',
                    label: '第二周'
                  }, {
                    value: '3',
                    label: '第三周'
                  }, {
                    value: '4',
                    label: '第四周'
                  }, {
                    value: '5',
                    label: '第五周'
                  }, {
                    value: '6',
                    label: '第六周'
                  }, {
                    value: '7',
                    label: '第七周'
                  }, {
                    value: '8',
                    label: '第八周'
                  }, {
                    value: '9',
                    label: '第九周'
                  }, {
                    value: '10',
                    label: '第十周'
                  }
                ],
                value1: [],
                value2: [],
                classes: [],
                formClassList: {
                  cg_id: '',
                  week: ''
                },
                // 获取row的key值
                getRowKeys(row) {
                    return row.school_id;
                },
                // 要展开的行，数值的元素是row的key值
                expands: [],
                //所有课程信息
                Courses:[],
                weekTable: ['周一','周二','周三','周四','周五','周六','周日'],
                data_left_data: [],
                selected_class: [],
                data_left_tea: [],
                teacher_txt: [],
                formClass: 
                {
                  sch_detail_id: '', //课程主键id
                  data_periods: '', // 学期id
                  cg_id: '', //组数id
                  data_weeks: '',
                  data_time: '',
                  course_name: '',
                  course_id: '', //此隐藏
                  course_no: '', //此隐藏
                  c_time_row1: '',
                  c_time_length: '', //一共有几节
                  tea_name_all: '',
                  tea_id_all: '',
                  cg_address: ''
                },
                anyWeek: '',
                yyyymmdds: '',
                teachers: {
                    tea_name1: '',
                    tea_id1: '',
                    tea_name2: '',
                    tea_id2: '',
                    tea_name3: '',
                    tea_id3: '',
                    tea_name4: '',
                    tea_id4: '',
                    tea_name5: '',
                    tea_id5: '',
                },
                rulesClass: {
                    data_periods: [
                        { required: true, message: '请选择学期！', trigger: 'blur' }
                    ],
                    cg_id: [
                        { required: true, message: '请选择班级！', trigger: 'blur' }
                    ],
                    data_weeks: [
                        { required: true, message: '请选择周数！', trigger: 'blur' }
                    ],
                    data_time: [
                        { required: true, message: '请选择日期！', trigger: 'blur' }
                    ],
                },
                periods: [],
                classes: [],
                weeks: [
                    {
                        value: '1',
                        label: '第一周',
                    },
                    {
                        value: '2',
                        label: '第二周',
                    },
                    {
                        value: '3',
                        label: '第三周',
                    },
                    {
                        value: '4',
                        label: '第四周',
                    },
                    {
                        value: '5',
                        label: '第五周',
                    },
                    {
                        value: '6',
                        label: '第六周',
                    },
                    {
                        value: '7',
                        label: '第七周',
                    },
                    {
                        value: '8',
                        label: '第八周',
                    },
                    {
                        value: '9',
                        label: '第九周',
                    },
                    {
                        value: '10',
                        label: '第十周',
                    },
                    {
                        value: '11',
                        label: '第十一周',
                    },
                    {
                        value: '12',
                        label: '第十二周',
                    },
                    {
                        value: '13',
                        label: '第十三周',
                    },
                    {
                        value: '14',
                        label: '第十四周',
                    },
                    {
                        value: '15',
                        label: '第十五周',
                    },
                ],
                sections: [
                    {
                        value: '1',
                        label: '第1节(8:30-9:15)',
                    },
                    {
                        value: '2',
                        label: '第2节(9:20-10:05)',
                    },
                    {
                        value: '3',
                        label: '第3节(10:25-11:10)',
                    },
                    {
                        value: '4',
                        label: '第4节(11:15-12:00)',
                    },
                    {
                        value: '5',
                        label: '第5节(14:30-15:15)',
                    },
                    {
                        value: '6',
                        label: '第6节(15:20-16:05)',
                    },
                    {
                        value: '7',
                        label: '第7节(16:25-17:10)',
                    },
                    {
                        value: '8',
                        label: '第8节(17:15-18:00)',
                    },
                    {
                        value: '9',
                        label: '第9节(19:00-19:45)',
                    },
                    {
                        value: '10',
                        label: '第10节(19:50-20:35)',
                    },
                    {
                        value: '11',
                        label: '第11节(20:50-21:35)',
                    },
                    {
                        value: '12',
                        label: '第12节(21:40-22:25)',
                    },
                ],
                sec_len: [
                    {
                        value: '1',
                        label: '1节',
                    },
                    {
                        value: '2',
                        label: '2节',
                    },
                    {
                        value: '3',
                        label: '3节',
                    },
                    {
                        value: '4',
                        label: '4节',
                    },
                    {
                        value: '5',
                        label: '5节',
                    },
                    {
                        value: '6',
                        label: '6节',
                    },
                    {
                        value: '7',
                        label: '7节',
                    },
                    {
                        value: '8',
                        label: '8节',
                    },
                    {
                        value: '9',
                        label: '9节',
                    },
                    {
                        value: '10',
                        label: '10节',
                    },
                ],
                courses: [],
                dialogFormVisible: false,
                dialogTeaVisible: false,
                all_tea: [], //所有老师的名字
                all_tea_key: [], //所有老师的id
                school_ids: '', //暂存学期ID
                school_id_eidt: '', //暂存学期id-用在点击查询课程以后
            }
        },
        props:{
            width:{
                type:Number,
                default:385
            },
            height:{
                type:Number,
                default:635
            },
            practiceCourses:{
                type:Array,
                default:()=>[]
            },
            timeTable:{
                type:Array,
                default:()=>[1,2,3,4,5,6,7,8,9,10,11,12]
            },
            colorArrays: {
                type:Array,
                default:()=>['#ef5b9c','#f15b6c', '#f26522', '#ffd400', '#8552a1', '#7fb80e', '#65c294', '#78cdd1', '#33a3dc']
            }
        },
        computed:{
            courseWidth(){
                return Math.max((this.width - 35) / this.weekTable.length,50)
            },
            courseHeight(){
                return Math.max((this.height - 35) / this.timeTable.length,50)
            },
            selectedCourse(){
                return this.Courses[this.selectedCourseIndex];
            }
        },
        created(){
 
        },
        mounted(){
          this.getAllSchool();
          this.getALLCourse();
          this.getALLTeacher();
        },
        methods:{
          // 格式化时间戳
          setNowTimes (time) {
            let myDate = new Date(time)
            let wk = myDate.getDay()
            let yy = String(myDate.getFullYear())
            let mm = String(myDate.getMonth() < 10 ? '0' + (myDate.getMonth() + 1) :(myDate.getMonth() + 1) )
            let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
            let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
            let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
            let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
            let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            let weeks_num = ['7','1','2','3','4','5','6']
            let week = weeks[wk]
            let anyweek = weeks_num[wk]
            this.nowDate = yy + '/' + mm + '/' + dd ;
            this.nowTime = hou + ':' + min + ':' + sec
            this.anyWeek = anyweek
          },
          // 打开选择课程弹框
          open_course() {
              this.dialogFormVisible = true;
          },
          // 打开选择教师弹框
          open_teacher() {
              this.dialogTeaVisible = true;
          },
          // 显示title属性
          renderContent (h, option) {
              return h('span', {domProps: {title: option.label}}, option.label,);
          },
          //格式化时间戳
          dateFormat(row, column, cellValue, index){
            var row_time = row[column.property];
            let d = new Date(row_time);
            let y = d.getFullYear(); // 年份
            let m = (d.getMonth() + 1).toString().padStart(2,'0'); // 月份
            let r = d.getDate().toString().padStart(2,'0'); // 日子
            return `${y}-${m}-${r}`;// es6 字符串模板   
          },
          formatDate(date){
            let d = new Date(date);
            let y = d.getFullYear(); // 年份
            let m = (d.getMonth() + 1).toString().padStart(2,'0'); // 月份
            let r = d.getDate().toString().padStart(2,'0'); // 日子
            return `${y}.${m}.${r}`;// es6 字符串模板
          },
          formatDate2(date){
            let d = new Date(date);
            let y = d.getFullYear(); // 年份
            let m = (d.getMonth() + 1).toString().padStart(2,'0'); // 月份
            let r = d.getDate().toString().padStart(2,'0'); // 日子
            return `${y}-${m}-${r}`;// es6 字符串模板
          },
          // 获取分班信息
          getClassGroup(school) {
              let that = this;
              that.formClass.cg_id = '';
              that.classes = [];
              addclass.getClassGroup(school).then(function (resp) {
                  if (resp.data.code == '200') {
                      var xs = resp.data.data
                      var leng = xs.length;
                      for (var i = 0; i < leng; i++) {
                          var value_id = xs[i].cg_id;
                          var label_txt = xs[i].schoolClass.class_name + ' ' + xs[i].cg_classNo + ' ' + xs[i].cg_halfgroupNo;
                          that.classes.push({
                              label: label_txt,
                              value: value_id
                          });
                      }
                  } else {
                      that.$message.warning("分组信息获取失败!")
                  }
              })
          },
          // 获取期数信息
          getAllSchool() {
              let that = this;
              addclass.getALLSchool().then(function (resp) {
                  if (resp.data.code == '200') {
                    // 参数拼接，得到想要的数据格式
                    var list_len = resp.data.data.list.length;
                    var start_temp = resp.data.data.list[0].cg_start_time;
                    for (var i = 0; i < list_len; i++) {
                      var temp_start_time = resp.data.data.list[i].cg_start_time;
                      var temp_end_time = resp.data.data.list[i].cg_end_time;
                      var school_id = resp.data.data.list[i].school_id;
                      var start_time = that.formatDate(temp_start_time);
                      var end_time = that.formatDate(temp_end_time);
                      var start_end = resp.data.data.list[i].cg_periods + '(' + start_time + '-' + end_time + ')';
                      that.periods.push({
                          cg_periods: start_end,
                          school_id: school_id
                      });
                    }

                    that.tableData = resp.data.data.list
                    console.log(that.tableData)
                  } else {
                      that.$message.warning("期数获取失败!")
                  }
              })
          },
          // 获取所有课程信息
          getALLCourse() {
              let that = this;
              addclass.getALLCourse().then(function (resp) {
                  if (resp.data.code == '200') {
                      resp.data.data.forEach((item, index) => {
                      that.data_left_data.push({
                          label: item.course_name,
                          key: item.course_id,
                          course_no: item.course_no,
                        });
                      });
                  } else {
                      that.$message.warning("课程获取失败!")
                  }
              })
          },
          // 获取所有教师
          getALLTeacher() {
            let that = this;
            addclass.getALLTeacher().then(function (resp) {
                if (resp.data.code == '200') {
                    resp.data.data.forEach((item, index) => {
                    that.data_left_tea.push({
                        label: item.teacher_name,
                        key: item.teacher_id
                      });
                    });
                } else {
                    that.$message.warning("教师获取失败!")
                }
            })
          },
          // 展开与折叠行
          exChange(row,column) {
            var that = this;

            that.school_ids = row.school_id;
            that.getClassGroup(that.school_ids);
            // 默认展开一行，否则select数据会出错，因为展开或关闭都会触发exchange事件
            if (column.length) {
              that.expands = []
              if (row) {
                that.Courses = [];
                that.expands.push(row.school_id)
              }
            } else {
              that.Courses = [];
              that.expands = [];
            }
          },
          // 查询课表
          querySchedule(school_id, week) {
            let that = this;
            if (school_id != undefined && school_id != '' && week != undefined && week != '') {
              addclass.selectCourse(school_id,week).then(function (resp){
                that.school_id_eidt = school_id;
                if (resp.data.code == '200') {
                  that.Courses = resp.data.data;
                }
                if (resp.data.code == '404') {
                  that.$message.warning("未查询到课程，请重试!")
                }
              })
            } else {
              that.$message.warning("查询失败,请检查信息是否选择正确!")
            }
          },
          // 确认分配的课程
          confirm_class(selected_class,data) {
              var that = this;
              // 课程id是从一开始的 所以减一个一
              var selected_temp = selected_class - 1;
              // console.log(data[selected_temp]);
              let arr_len = selected_class.length;
              if (arr_len != '1') {
                  that.$message.error('只能选择一门课程！');
              }else{
                  that.dialogFormVisible = false;
                  that.formClass.course_name = data[selected_temp].label;
                  that.formClass.course_id = data[selected_temp].key;
                  that.formClass.course_no = data[selected_temp].course_no;
              }
          },
          // 确认选择老师
          confirm_tea(selected_tea,data_tea) {
              var that = this;
              let arr_len = selected_tea.length;
              var tea_n = '';
              var tea_id = '';
              if (arr_len >= 1 && arr_len <= 4) {
                  that.dialogTeaVisible = false;
                  for (var i = 0; i < arr_len; i++) {
                      var te = selected_tea[i] - 1;
                      // 将多个老师，拼接再一起
                      that.all_tea.push(
                          data_tea[te].label
                      );
                      that.tea_n = that.all_tea.join(',');
                      // 将多个老师的ID,拼接在一起
                      that.all_tea_key.push(
                          data_tea[te].key
                      );
                      that.tea_id = that.all_tea_key.join(',');
                  }
                  
                  that.formClass.tea_name_all = that.tea_n

                  var tea_len = that.all_tea.length;
                  if (tea_len == 1) {
                      that.teachers.tea_name1 = '';
                      that.teachers.tea_id1 = '';
                      that.teachers.tea_name2 = '';
                      that.teachers.tea_id2 = '';
                      that.teachers.tea_name3 = '';
                      that.teachers.tea_id3 = '';
                      that.teachers.tea_name4 = '';
                      that.teachers.tea_id4 = '';
                      that.teachers.tea_name5 = '';
                      that.teachers.tea_id5 = '';
                      that.teachers.tea_name1 = that.all_tea[0];
                      that.teachers.tea_id1 = that.all_tea_key[0];
                  }
                  if (tea_len == 2) {
                      that.teachers.tea_name1 = '';
                      that.teachers.tea_id1 = '';
                      that.teachers.tea_name2 = '';
                      that.teachers.tea_id2 = '';
                      that.teachers.tea_name3 = '';
                      that.teachers.tea_id3 = '';
                      that.teachers.tea_name4 = '';
                      that.teachers.tea_id4 = '';
                      that.teachers.tea_name5 = '';
                      that.teachers.tea_id5 = '';
                      that.teachers.tea_name1 = that.all_tea[0];
                      that.teachers.tea_id1 = that.all_tea_key[0];
                      that.teachers.tea_name2 = that.all_tea[1];
                      that.teachers.tea_id2 = that.all_tea_key[1];
                  }
                  if (tea_len == 3) {
                      that.teachers.tea_name1 = '';
                      that.teachers.tea_id1 = '';
                      that.teachers.tea_name2 = '';
                      that.teachers.tea_id2 = '';
                      that.teachers.tea_name3 = '';
                      that.teachers.tea_id3 = '';
                      that.teachers.tea_name4 = '';
                      that.teachers.tea_id4 = '';
                      that.teachers.tea_name5 = '';
                      that.teachers.tea_id5 = '';
                      that.teachers.tea_name1 = that.all_tea[0];
                      that.teachers.tea_id1 = that.all_tea_key[0];
                      that.teachers.tea_name2 = that.all_tea[1];
                      that.teachers.tea_id2 = that.all_tea_key[1];
                      that.teachers.tea_name3 = that.all_tea[2];
                      that.teachers.tea_id3 = that.all_tea_key[2];
                  }
                  if (tea_len == 4) {
                      that.teachers.tea_name1 = '';
                      that.teachers.tea_id1 = '';
                      that.teachers.tea_name2 = '';
                      that.teachers.tea_id2 = '';
                      that.teachers.tea_name3 = '';
                      that.teachers.tea_id3 = '';
                      that.teachers.tea_name4 = '';
                      that.teachers.tea_id4 = '';
                      that.teachers.tea_name5 = '';
                      that.teachers.tea_id5 = '';
                      that.teachers.tea_name1 = that.all_tea[0];
                      that.teachers.tea_id1 = that.all_tea_key[0];
                      that.teachers.tea_name2 = that.all_tea[1];
                      that.teachers.tea_id2 = that.all_tea_key[1];
                      that.teachers.tea_name3 = that.all_tea[2];
                      that.teachers.tea_id3 = that.all_tea_key[2];
                      that.teachers.tea_name4 = that.all_tea[3];
                      that.teachers.tea_id4 = that.all_tea_key[3];
                  }
                  // 清空临时存储的数据
                  that.all_tea = [];
                  that.all_tea_key = [];
              }else{
                  that.$message.error('请选择正确选择(1-4)位教师！');
              }
          },
          //点击修改按钮，同时获取修改的课程信息
          getEditData(data_course) {
            var that = this;
            that.formClass.sch_detail_id = data_course.sch_detail_id;
            that.formClass.data_periods = that.school_ids;
            that.formClass.cg_id = data_course.cg_id;
            that.formClass.data_weeks = String(data_course.week);
            that.formClass.course_name = data_course.course_name;
            that.formClass.course_id = data_course.course_id;
            that.formClass.course_no = data_course.course_no;
            var day_temp = that.formatDate2(data_course.class_day);
            that.formClass.data_time = day_temp;
            // 处理右边已选择的课程数据
            var class_left = new Array();
            that.class_left = data_course.course_id;
            let arr = new Array();
            // 除去左边的把剩下的放在左边
            that.data_left_data.forEach((item, index) => {
              if (item.key != class_left) {
                arr.push({
                  label: item.label,
                  key: item.key,
                  course_no: item.course_no,
                });
              }
            });
            that.selected_class = [that.class_left];
            that.data_left_data = arr;
            // 将所有已选择的老师放到右边
            var arr_tea = new Array();
            // that.arr_tea = data_course.tea_id1;
            var t1 = data_course.tea_id1;
            var t2 = data_course.tea_id2;
            var t3 = data_course.tea_id3;
            var t4 = data_course.tea_id4;
            var f_tea = [];
            if (t1 != null) {
              f_tea.push(t1);
            }
            if (t2 != null) {
              f_tea.push(t2);
            }
            if (t3 != null) {
              f_tea.push(t3);
            }
            if (t4 != null) {
              f_tea.push(t4);
            }

            // f_tea.push(t1);
            var n1 = data_course.tea_name1;
            var n2 = data_course.tea_name2;
            var n3 = data_course.tea_name3;
            var n4 = data_course.tea_name4;
            var f_tea_n = [];
            if (n1 != null) {
              f_tea_n.push(n1);
            }
            if (n2 != null) {
              f_tea_n.push(n2);
            }
            if (n3 != null) {
              f_tea_n.push(n3);
            }
            if (n4 != null) {
              f_tea_n.push(n4);
            }
            that.teachers.tea_name1 = n1;
            that.teachers.tea_id1 = t1;
            that.teachers.tea_name2 = n2;
            that.teachers.tea_id2 = t2;
            that.teachers.tea_name3 = n3;
            that.teachers.tea_id3 = t3;
            that.teachers.tea_name4 = n4;
            that.teachers.tea_id4 = t4;
            // f_tea_n.push(n1,n2,n3,n4);
            var t_n = f_tea_n.join(',');
            that.formClass.tea_name_all = t_n
            var arr_tea_temp = arr_tea.map(item => JSON.stringify(item))
            // that.arr_tea.push(data_course.tea_id1);
            // console.log(that.data_left_tea);
            let arr_tea_1 = new Array();
            that.data_left_tea.forEach((item, index) => {
              if (!arr_tea.includes(item.key)) {
                arr_tea_1.push({
                  label: item.label,
                  key: item.key
                });
              }
            });
            that.teacher_txt = f_tea;
            that.data_left_tea = arr_tea_1;
            that.formClass.c_time_row1 = String(data_course.c_time_row1);
            that.formClass.c_time_length = String(data_course.c_time_length);
            that.formClass.cg_address = data_course.now_place;
          },
          // 修改课程
          editCourseSubmit(formName) {
            var that = this;
            //获取分班信息
            this.$refs[formName].validate((valid) => {
            if (valid) {
            this.setNowTimes(this.formClass.data_time);
            var param_class = {
                sch_detail_id: parseInt(this.formClass.sch_detail_id),
                course_id: parseInt(this.formClass.course_id),
                course_name: this.formClass.course_name,
                course_no: this.formClass.course_no,
                c_time_length: parseInt(this.formClass.c_time_length),
                c_time_row1: parseInt(this.formClass.c_time_row1),
                cg_idList: [this.formClass.cg_id],
                tea_name1: this.teachers.tea_name1,
                tea_id1: parseInt(this.teachers.tea_id1),
                tea_name2: this.teachers.tea_name2,
                tea_id2: parseInt(this.teachers.tea_id2),
                tea_name3: this.teachers.tea_name3,
                tea_id3: parseInt(this.teachers.tea_id3),
                tea_name4: this.teachers.tea_name4,
                tea_id4: parseInt(this.teachers.tea_id4),
                tea_name5: this.teachers.tea_name5,
                tea_id5: parseInt(this.teachers.tea_id5),
                now_place: this.formClass.cg_address,
                class_day: this.formClass.data_time,
                week: parseInt(this.formClass.data_weeks),
                courseColum: parseInt(this.anyWeek),
                old_place: ""
            }
            addclass.updateCourse(param_class).then(function (resp) {
                if (resp.data.code == '200') {
                  that.querySchedule(that.school_id_eidt,that.formClass.data_weeks);
                  that.$message({
                    message: '课程修改成功',
                    type: 'success'
                  });
                } else {
                    that.$message.error('修改失败，请重试...');
                }
            })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        // 删除课程
        delCourse(id,week) {
          var that = this;
          this.$confirm('此操作将永久删除这节课程, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = {
              sch_detail_id: id
            }
            addclass.deleteScheule(param).then(function (resp) {
              if (resp.data.code == '200') {
                  that.querySchedule(that.school_id_eidt,week);
                  that.showUsualCourseDialog = false;
                  that.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              } else {
                that.$message.error('删除失败,请重试!');
              }
            })
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        // 监听 pageSizeChange 改变的事件
        handleSizeChange(newSize) {
          this.queryInfo.pagesize = newSize
          this.getAllSchool()
        },
        // 监听 页面值 改变的事件
        handleCurrentChange(newPage) {
          this.queryInfo.pagenum = newPage
          this.getAllSchool()
        },
      }
    }
</script>
 
<style scoped>
    .course-table{
        border-radius: 12px;
    }
    .top {
        display: flex;
        flex-direction: row;
        padding-left: 35px;
        background-color: #31c27c;
        color: #fff;
        text-align: center;
    }
    .top-text {
        width: 100px;
        height: 35px;
        font-size: 16px;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    .main{
        height:1200px;
        width:730px;
        display:flex;
        position: relative;
    }
    .flex-item {
        width: 95px;
        height: 200px;
    }
    .kcb-item {
        position: absolute;
        justify-content: center;
        display: flex;
        align-items: center;
        border-radius: 12px;
        overflow: hidden;
        
        
    }
    .period{
        background-color:#31c27c;
        color:#fff;
    }
    .small-text {
        font-size: 8px;
        color: #fff;
        text-align: center;
    }
    .left-text {
        width: 35px;
        height: 100px;
        font-size: 26px;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    .btn_practice_course{
        position: absolute;
        z-index: 110;
        top: 35px;
        right: 0px;
        width: 100px;
        height: 100px;
        line-height: 24px;
        background: #31c27c;
        border-radius: 50px;
        font-size: 24px;
        text-align: center;
        color: #fff;
        opacity: 0.7;
        padding: 12px;
    }
    .el-dialog .dialog-content{
        color: #000;
        line-height: 60px;
 
    }
    .el-dialog .dialog-content .tip{
        color: #000;
        line-height: 60px;
        text-align: center;
    }
    .c_content {
      margin-top: 15px;
      margin-left: 15px;
    }
</style>
<style>
   .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  /*.is-scrolling-none{
    height: 600px;
    overflow-y: scroll;
  }*/
  /*.v-modal{
    z-index: 2020 !important;
  }*/
</style>